<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jSearch</title>
    <meta baseurl="http://">
    <link rel="stylesheet" type="text/css" href="../public/iview.css">
    <link rel="stylesheet" type="text/css" href="../content/search_bar.css">
    <link rel="stylesheet" type="text/css" href="./result.css">
    <script src="../public/jquery-3.3.1.min.js"></script>
    <script src="../public/axios.min.js"></script>
    <script type="text/javascript" src="../public/vue-dragging.js"></script>
    <script type="text/javascript" src="../public/vue.min.js"></script>
    <!--iview 3.2.2-->
    <script type="text/javascript" src="../public/iview.min.js"></script>
    <style>


            .col{
                height: 100%;
                width: 600px;
                float: left;
                padding: 0 0 0 5px;
            }
            .content{
                width: 100%;
                height: 500px;
            }
            .list-over{color:#c5c8ce;}

            .alipay .slid-show{
                transition: max-height 1s;
                max-height:0px;
                display: block;
                overflow: hidden;
            }

            .alipay:hover .slid-show{
                max-height: 250px;
            }
            @-webkit-keyframes alipay{
                from {height: 0px;}
                to{height: 100px;}
            }
            .header_bar{
                background-color: rgba(255,255,255,0.8);    
                box-shadow: 0 0 1px rgba(0,0,0,0.25);
                top:-100px;    
                position: fixed;
                width:100%;    
                z-index: 1000;
                transition: all .8s cubic-bezier(0.68,-0.55, 0.19, 2.03);
            }
            .down{top:0;}
            .top_area{
                width: 100%;
                height: 30px;
                position: fixed;
                z-index: 900;
            }
            .ivu-form-item {
    margin-bottom: 14px;}
    </style>
</head>

<body>

    <div id="app">

        <Layout>
            <div class="top_area"></div>
            <i-header class="header_bar">
                <Row type="flex" align="middle" class="opacity-7">
                    <i-col span="12"><span style="font-size:24px;font-weight:bold;color: #2d8cf0;">jSearch<span style="font-size:14px;">&nbsp;聚搜</span></span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>just Search it!</strong></i-col>
                    <i-col span="9">
                        <form v-bind:action="'#'+searchInputValue">
                            <i-input search placeholder="Enter something..." v-model="searchInputValue" @on-search="searchInputSubmit"></i-input>
                        </form>
                    </i-col>
                    <i-col span="1"> </i-col>

                    <i-col span="1">
                        <i-button type="text" shape="circle" @click="drawer.show = true" style="background:none;box-shadow:none;">
                                <Badge :text="version.notice"><Icon type="ios-cog-outline" :size='30' /></Badge>
                        </i-button>
                    </i-col>
                    <i-col span="1" style="text-align:center;"><a href="https://github.com/dubox/jSearch" target="_blank">
                        <Icon type="logo-github" :size='30' />
                        </a></i-col>
                </Row>

            </i-header>

            <div class="content" v-bind:style="{height:clientHeight+'px',overflowX: 'scroll',overflowY: 'hidden'}">
                <div class="slider" v-bind:style="{ height: '100%', width: sliderWidth + 'px' }">
                    <div class="col" v-for="(item1, index1) in searchData.models" v-if="item1.show && !(searchData.results[index1].length==1 && searchData.results[index1][0]=='') && searchData.results[index1].length>0">
                        <Scroll v-if="item1.type!='bookmarks'" :on-reach-bottom="handleReachBottom(index1)" :height="clientHeight">

                            <Card dis-hover v-for="(item, index) in searchData.results[index1]" :key="index" v-if="item!=''"
                                style="margin-bottom:5px;">

                                <span v-html="item"></span>

                            </Card>
                            <Alert class="opacity-7" type="warning" v-if="searchData.results[index1][searchData.results[index1].length-1] == ''">
                                No more ...
                            </Alert>

                        </Scroll>
                        <Scroll v-if="item1.type=='bookmarks'" :on-reach-bottom="handleReachBottom(index1)" :height="clientHeight">

                            <Card dis-hover style="margin-bottom:5px;">
                                <div class="result c-container " v-for="(item, index) in searchData.results[index1]"
                                    :key="index">
                                    <h3 class="t">
                                        <img :src="'chrome://favicon/'+item.url" />
                                        <a :href="item.url" target="_blank"><span v-html="item.title"></span></a>

                                    </h3>
                                    <div class="c-abstract">

                                        <span class=" newTimeFactor_before_abs m">{{item.dateAdded}}&nbsp;-&nbsp;</span>
                                        {{item.url}} -
                                        <Icon :type="item.tag=='bookmark'?'ios-bookmark':'ios-time'" :title="item.tag" />
                                    </div>
                                </div>
                            </Card>
                            <Alert class="opacity-7" type="warning">No more ...</Alert>
                        </Scroll>
                    </div>

                </div>


            </div>

        </Layout>


        <Drawer title="Settings" v-model="drawer.show" width="550" :mask-closable="true" :styles="drawer.styles">
                <Divider orientation="left" dashed style="font-size:12px;font-weight:normal;">版本信息</Divider>
                <Row type="flex">
                        <i-col span="2"></i-col>
                        <i-col span="22">
                            <span>当前版本：v{{version.localVer}}</span><span style="color:coral;" v-if="version.notice=='new'">
                                    &nbsp;&nbsp;&nbsp;&nbsp;发现新版本：<a href="https://github.com/dubox/jSearch/releases" target="_blank">v{{version.latestVer}}</a></span>
                        </i-col>
                </Row>
                <Divider orientation="left" dashed style="font-size:12px;font-weight:normal;">配置站点</Divider>
            <i-form :model="searchData.models">

                <Row :gutter="32" type="flex" align="middle" v-for="(item, index) in searchData.models" v-dragging="{ item: item, list: searchData.models, group: 'models'}"
                    :key="index" :draggable="drawer.itemDraggable">
                    <i-col span="6">
                        <form-item>
                            <i-select v-model="item.type" placeholder="搜索引擎" :disabled="!item.canEdit">
                                <i-option value="baidu">百度</i-option>
                                <i-option value="google">谷歌</i-option>
                                <i-option v-if="item.type == 'bookmarks'" value="bookmarks">书签&浏览历史</i-option>
                                <i-option v-if="item.type == 'weixin' && item.symbol=='1'" value="weixin">公众号</i-option>
                                <i-option v-if="item.type == 'weixin' && item.symbol=='2'" value="weixin">公众号文章</i-option>

                            </i-select>
                        </form-item>
                    </i-col>
                    <i-col span="14">
                        <form-item>
                            <i-input :value="item.scope" @on-blur="if($event.target.composing)return;item.scope =$event.target.value;drawer.itemDraggable = true;"
                                placeholder="输入想要搜索的网站域名或一个Url" :disabled="!item.canEdit" autocomplete="on" @on-focus="drawer.itemDraggable = false;" />
                        </form-item>
                    </i-col>
                    <i-col span="4">
                        <form-item>
                            <i-switch v-model="item.show" />
                        </form-item>
                    </i-col>

                </Row>

            </i-form>
           
            <i-form :model="settingFormData">
                <Row :gutter="32" type="flex" align="middle">
                    <i-col span="6">
                        <form-item>
                            <i-select v-model="settingFormData.type" placeholder="please choose the type">
                                <i-option value="baidu">百度</i-option>
                                <i-option value="google">谷歌</i-option>
                            </i-select>
                        </form-item>
                    </i-col>
                    <i-col span="14">
                        <form-item>
                            <i-input v-model="settingFormData.scope" placeholder="输入想要搜索的网站域名或一个Url" />
                        </form-item>
                    </i-col>
                    <i-col span="4">
                        <form-item>
                            <i-button type="primary" @click="settingAddSearchScope">Add</i-button>

                        </form-item>
                    </i-col>

                </Row>

            </i-form>
            <div class="demo-drawer-footer" style="position: absolute;bottom: 5px;">

                <Card style="width:50%;float: right;margin-right: 5px;" class="alipay">
                    <img src="../public/imgs/alipay.png" width="100%" class="slid-show">
                    <div style="text-align:center" class="slid-show">
                        <h5>您的捐赠是对我最大的鼓励和支持</h5>
                        <h5>Your donation is the greatest encouragement and support for me.</h5>

                        <Divider dashed style="margin:5px 0;"></Divider>
                    </div>
                    <div style="text-align:center">
                        <h5>如果有任何问题或建议可反馈至：<a href="https://github.com/dubox/jSearch/issues" target="_blank">issues@jSearch</a></h5>
                    </div>

                </Card>
            </div>
        </Drawer>
    </div>




    <script type="text/javascript" src="../public/hotkeys.min.js"></script>
    <script type="text/javascript" src="../content/search_bar_effect.js"></script>
    <script type="text/javascript" src="../content/search_bar.js"></script>
    <script type="text/javascript" src="../content/content.js"></script>
    <script type="text/javascript" src="options.js"></script>
</body>

</html>